import React from "react";
import SortIco from "../../Common/svg/SortIco";
import "./index.css";
import "../../Common/css/common.css";

export default class  extends React.Component{
    
    constructor(props){
        super();
        this.state={
            title:props.title,
            type:2,
            upColor:"#999999",
            downColor:"#999999",
            clear:props.clear,
            Change:props.Change,
            orderSelectType:props.orderSelectType
        }
    }
    UNSAFE_componentWillReceiveProps(props){
        if(props.clear===true){
            this.setState({
                type:2,
                upColor:"#999999",
                downColor:"#999999",
            })
        }
    }

    ChangeType(){
        let selectColor="#5393EB";
        let commonColor="#999999";

        let type=this.state.type;
        type=(++type)%3;

        switch(type){
            case 0:
                this.setState({
                    upColor:selectColor,
                    downColor:commonColor
                });
                break;
            case 1:
                this.setState({
                    upColor:commonColor,
                    downColor:selectColor
                });
                break;
            case 2:
                this.setState({
                    upColor:commonColor,
                    downColor:commonColor
                });
                break;
            default:
                break;
        }
        this.setState({
            type
        },()=>{
            if(this.state.Change!==undefined){
                this.state.Change(this.state.orderSelectType,this.state.type);
            }
        })
    }
    render(){
        return(
            <div  className="SortTableItemContainer NoSelect" onClick={e=>this.ChangeType(e)}>{this.state.title}
                <div className="SortTableItemIco">
                    <div className="SortTableItemLeft"><SortIco color={this.state.upColor} rotate="180"/></div>
                    <div className=" SortTableItemRight"><SortIco color={this.state.downColor}/></div>
                </div>
            </div>
        )
    }
}